<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>最爱的你</title>
		<style type="text/css">
			h1 {
				color: pink;
				font-size: 50px;
			}
			h2{
				color: lightpink;
				font-size: 32px;
			}
			h3{
				color: lightpink;
				font-size: 32px;
			}
			p{
				color: aqua;
				font-size: 50px;
				font-family: 楷体;
			}

			.box1 {
				width: 280px;
				height: 500px;
				/* border: 15px solid red;
				border-style: solid;
				margin-left: 1px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: salmon;
				border-radius: 50px; */
			}

			.box2 {
				width: 400px;
				height: 200px;
				border: 15px solid red;
				border-style: solid;
				margin-left: 1px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: salmon;
				border-radius: 50px;
			}

			.box3 {
				width: 400px;
				height: 200px;
				border: 15px solid red;
				border-style: solid;
				margin-left: 1px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: salmon;
				border-radius: 50px;
				
			}

			.box4 {
				width: 400px;
				height: 200px;
				border: 15px solid red;
				border-style: solid;
				margin-left: 1px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: salmon;
				border-radius: 50px;
				background: url(img/3.jpg);
				background-size: cover;
			}
			
			.box5 {
				width: 400px;
				height: 200px;
				border: 15px solid red;
				border-style: solid;
				margin-left: 1px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: salmon;
				border-radius: 50px;
				background: url(img/6.jpg);
				background-size: cover;
				background-position: left ;
			}
			
			.box6 {
				width: 400px;
				height: 200px;
				border: 15px solid red;
				border-style: solid;
				margin-left: 1px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: salmon;
				border-radius: 50px;
				background: url(img/7.jpg);
				background-size: cover;
				background-position: left ;
			}
			.box7 {
				width: 200px;
				height: 100px;
				border: 15px solid white;
				border-style: solid;
				margin-left: 50px;
				margin-top: 20px;
				float: none;
				border-width: 10px;
				border-color: white;
				border-radius: 50px;	
			}

			div {
				display: flex;
				flex-wrap: wrap;
			}
		</style>
	</head>
	<body>
		<audio src="img/爱要怎么说出口(Live)-林俊杰-15198210.mp3" autoplay loop ></audio>
		<h1 align="center">我的女孩</h1>
		<hr size="3" color="#ccc">
		<div>
			<span style="float: left;">
			<img src="img/1.jpg" alt="美美哒" width="500px" class="box1">
			</span>
			<!-- <p class="box2">&nbsp;&nbsp;我喜欢你</p>
			<p class="box2">&nbsp;&nbsp;我爱你</p> -->
			<span style="float: right;">
			<p class="box7">我爱你</p>
			<p class="box7">我喜欢你</p>
			</span>
            <div>
			<h2 id="h1" class="box4"></h2>
			<h2 id="h2" class="box5"></h2>
			<h2 id="h3" class="box6"></h2>
			<h2 id="h4" class="box2"></h2>
			<script>
				// 设置计时
				var countDownDate1 = new Date("10 31, 2022 00:00:00").getTime();
				
				// 更新计时
				var x = setInterval(function() {
					var now = new Date().getTime();
					var distance = now - countDownDate1;
				
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				
					document.getElementById("h1").innerHTML = "&nbsp;&nbsp;&nbsp;宝宝，我们已经在一起：<br>" + days + "天" + hours + "小时" + minutes + "分" + seconds +
						"秒" + "了";
						
					if (distance < 0) {
						clearInterval(x);
						document.getElementById("demo").innerHTML = "已吃完";
					}
				}, 1000);
					
				// 设置计时
				var countDownDate2 = new Date("8 15, 2002 18:00:00").getTime();
				
				// 更新计时
				var x = setInterval(function() {
					var now = new Date().getTime();
				var distance = now - countDownDate2;
				
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				
					document.getElementById("h2").innerHTML = "&nbsp;&nbsp;乖宝宝来到这个世界已经：<br>" + days + "天" + hours + "小时" + minutes + "分" + seconds +
						"秒" + "了";
				
					if (distance < 0) {
						clearInterval(x);
						document.getElementById("demo2").innerHTML = "已吃完";
					}
				}, 1000);
				// 设置计时
				var countDownDate3 = new Date("8 6, 2005 00:00:00").getTime();
				
				// 更新计时
				var x = setInterval(function() {
					var now = new Date().getTime();
				var distance = now - countDownDate3;
				
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				
					document.getElementById("h3").innerHTML = "&nbsp;&nbsp;宝宝来到这个世界已经：<br>" + days + "天" + hours + "小时" + minutes + "分" + seconds +
						"秒" + "了";
				
					if (distance < 0) {
						clearInterval(x);
						document.getElementById("demo2").innerHTML = "已吃完";
					}
				}, 1000);
				// 设置计时
				var countDownDate4 = new Date("6  20, 2023 00:00:00").getTime();
				
				// 更新计时
				var x = setInterval(function() {
					var now = new Date().getTime();
				var distance =countDownDate4 -  now;
				
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				
					document.getElementById("h4").innerHTML = "&nbsp;&nbsp;距离我们的暑假还有：<br>" + days + "天" + hours + "小时" + minutes + "分" + seconds +
						"秒" + "了";
				
					
				}, 1000);
			 </script>
			
		</div>
	</body>
</html>